<!--
  选择企业用户
 -->
<template>
  <!-- 搜索工作栏 -->
  <el-dialog
    title="请选择学生"
    :visible.sync="dialogVisible"
    width="80%"
    custom-class="choose-student-pop"
    append-to-body
    @close="resetQuery"
  >
    <div style="margin-bottom: 20px;">
      <p>已选择{{ allSelect.length }}名学生（2个维度相加去重）</p>
      <div style="margin: 10px 0">
        <span style="margin-right:10px;">当前结果:{{ allSelect.length === 0 ? '无' : '' }}</span>
        <el-tag
          v-for="(tag, jj) in allSelect"
          :key="jj"
          closable
          style="margin: 2px 5px;"
          @close="handleDelete(tag)"
        >
          {{ tag.studentName || '--' }}
        </el-tag>
      </div>
      <el-tabs v-model="activeName" @tab-click="tabChange">
        <el-tab-pane label="学生维度" name="1">
          <StudentList ref="StudentList" @selectChange="updateUserSelect" />
        </el-tab-pane>
        <el-tab-pane label="简历维度" name="2">
          <ResumeList ref="ResumeList" @selectChange="updateResumeSelect" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" style="margin-left: 10px" @click="handleConfirm">确 认</el-button>
    </div>
  </el-dialog>
</template>
<script>
import StudentList from './studentList.vue'
import ResumeList from './resumeList.vue'
export default {
  name: 'ChooseCompanyPop',
  components: {
    StudentList,
    ResumeList
  },
  data() {
    return {
      activeName: '1',
      // 遮罩层
      loading: true,
      dialogVisible: false,
      index: 0,
      selectStudentList: [],
      userList: [],
      resumeList: [],
      allSelect: []
    }
  },
  methods: {
    handleDelete(item) {
      const list = this.allSelect.filter(k => item.id !== k.id)
      this.$set(this, 'allSelect', list)
      if (item.studentId) {
        this.$refs.ResumeList.deleteSelectionItem(item)
      } else {
        this.$refs.StudentList.deleteSelectionItem(item)
      }
    },
    updateAllSelect() {
      const result = [...this.userList]
      const userIds = this.userList.map(item => item.id)
      this.resumeList.map(item => {
        if (userIds.indexOf(item.studentId) === -1) {
          result.push(item)
        }
      })
      this.allSelect = [...result]
    },
    tabChange(data) {
      this.index = Number(data.index)
    },
    updateUserSelect(data) {
      this.userList = [...data]
      this.updateAllSelect()
    },
    updateResumeSelect(data) {
      this.resumeList = [...data]
      this.updateAllSelect()
    },
    /**
     * 打开选择企业弹窗
     * @param {Array} result 选中id数组 int array
     */
    open(result) {
      this.dialogVisible = true
    },
    handleConfirm() {
      const result = JSON.parse(JSON.stringify(this.allSelect.map(item => item.id)))
      this.$emit('handleChoose', result)
      this.resetQuery()
      this.dialogVisible = false
    },
    close() {
      this.resetQuery()
      this.dialogVisible = false
    },
    resetQuery() {
      this.userList = []
      this.resumeList = []
      this.$refs.StudentList && this.$refs.StudentList.resetQuery()
      this.$refs.ResumeList && this.$refs.ResumeList.resetQuery()
      this.allSelect = []
      this.activeName = '1'
    }
  }
}
</script>
<style lang="scss">
.dialog-footer {
  width: 100% !important;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
}
</style>
